import * as types from '../types'

const state = {
  footList: [
        {id: 0, isActive: true, name: '首页', activeClass: 'u-icon-tabBar-index u-icon-tabBar-index-active', linkTo: '/'},
        {id: 1, isActive: false, name: '专题', activeClass: 'u-icon-tabBar-topic u-icon-tabBar-topic-active', linkTo: '/special'},
        {id: 2, isActive: false, name: '分类', activeClass: 'u-icon-tabBar-cate u-icon-tabBar-cate-active', linkTo: '/type'},
        {id: 3, isActive: false, name: '购物车', activeClass: 'u-icon-tabBar-cart u-icon-tabBar-cart-active', linkTo: '/shopcart'},
        {id: 4, isActive: false, name: '个人', activeClass: 'u-icon-tabBar-ucenter u-icon-tabBar-ucenter-active', linkTo: '/self'}
  ]
}

const actions = {
  changeActive ({commit}, id) {
    commit(types.CHANGE_ACTIVE, id)
  }
}

const getters = {
  footList: state => state.footList
}

/**
 * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
 * 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
 * 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
 * */
const mutations = {
  [types.CHANGE_ACTIVE] (state, id) {
    state.footList.forEach(list => {
      list.isActive = false
    })
    /** 改变footList数据中isActive属性，根据id来指定位置 */
    state.footList[id].isActive = true
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}
